<template>
  <div class="rate-main" bindtouchmove="touchMove">
    <template v-for="(item, index) in quantity" :key="index">
      <div
        class="icon relative"
        :class="[
          hollow && (current <= index || (disabled && current <= index + 1))
            ? `icon-collection-fill`
            : `icon-collection`,
        ]"
        @click="handleTap(index)"
        :style="[
          `font-size:${size}px`,
          `color:${
            current > index + 1 || (!disabled && current > index)
              ? active
              : normal
          }`,
        ]"
      >
        <div
          class="icon icon-main icon-collection-fill"
          v-if="disabled && current == index + 1"
          :style="[
            `font-size:${size}px`,
            `color:{{ active }}`,
            `width:${percent}%`,
          ]"
        ></div>
      </div>
    </template>
  </div>
</template>
<script lang="ts">
export default {
  name: "rate",
};
</script>
<script lang="ts" setup>
import { ref, onMounted, nextTick, getCurrentInstance } from "vue";

const props = withDefaults(
  defineProps<{
    quantity?: number;
    current?: number;
    score?: number;
    disabled?: boolean;
    size?: number;
    normal?: string;
    active?: string;
    hollow?: boolean;
  }>(),
  {
    quantity: 5,
    current: 0,
    score: 1,
    disabled: false,
    size: 20,
    normal: "#e9e9e9",
    active: "#ff3838",
    hollow: false,
  }
);

const emit = defineEmits(["change"]);

const percent = ref<number>(props.score);

const handleTap = (index: number) => {
  if (props.disabled) {
    return;
  }
  emit("change", {
    rate: index + 1,
  });
};
</script>


<style scoped>
@font-face {
  font-family: "rateFont";
  src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAT4AA0AAAAAB4wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAE3AAAABoAAAAciBprQUdERUYAAAS8AAAAHgAAAB4AKQALT1MvMgAAAaAAAABDAAAAVj1YSN1jbWFwAAAB+AAAAEIAAAFCAA/qlmdhc3AAAAS0AAAACAAAAAj//wADZ2x5ZgAAAkgAAADwAAABZLMTdXtoZWFkAAABMAAAADAAAAA2FZKISmhoZWEAAAFgAAAAHQAAACQHYgOFaG10eAAAAeQAAAARAAAAEgx6AHpsb2NhAAACPAAAAAwAAAAMAEYAsm1heHAAAAGAAAAAHgAAACABEQBPbmFtZQAAAzgAAAFJAAACiCnmEVVwb3N0AAAEhAAAAC0AAABHLO3vkXjaY2BkYGAA4t2/VF7G89t8ZeBmYQCBm9ZKMnC6ikGMuYXpP5DLwcAEEgUAHPQJOXjaY2BkYGBu+N/AEMPCAALMLQyMDKiABQBQwgLwAAAAeNpjYGRgYGBlcGZgYgABEMkFhAwM/8F8BgAPigFhAAB42mNgZGFgnMDAysDA1Ml0hoGBoR9CM75mMGLkAIoysDIzYAUBaa4pDA7PXj17zdzwv4EhhrmBoQEozAiSAwD/YA2wAHjaY2GAABYIrmKoAgACggEBAAAAeNpjYGBgZoBgGQZGBhCwAfIYwXwWBgUgzQKEQP6z1///A8lX//9LSkJVMjCyMcCYDIxMQIKJARUwMgx7AAA/9QiLAAAAAAAAAAAAAABGALJ42mNgZKhiEGNuYfrPoMnAwGimps+ox6jPqKbEz8jHCMLyjHJAmk1czMie0cxInlHMDChrZs6cJyaosI+NlzmU34I/lImPdb+CoHgXCyujIosYtzTfKlYBtlWyuqwKjKwsjNvFTdlkGDnZ1srKrmXjZJRhMxVvZxFgA+rgYI9iYoriV1TYzybAwsDABHeLBIMT0DUg29VBTjEHucvcjtGeUVyOUZ6JaFcybefnZ5HuFdEX6ZVm5uMvniemxuXmzqUmNs+FeOfHCeiKzfPi4vKaJ6YrUCDOIiM8YYKwDIu4OMRbrOtkZdex4vMWACzGM5B42n2QPU4DMRCFn/MHJBJCIKhdUQDa/JQpEyn0CKWjSDbekGjXXnmdSDkBLRUHoOUYHIAbINFyCl6WSZMia+3o85uZ57EBnOMbCv/fJe6EFY7xKFzBETLhKvUX4Rr5XbiOFj6FG9R/hJu4VQPhFi7UGx1U7YS7m9JtywpnGAhXcIon4Sr1lXCN/CpcxxU+hBvUv4SbGONXuIVrZakM4WEwQWCcQWOKDeMCMRwskjIG1qE59GYSzExPN3oRO5s4GyjvV2KXAx5oOeeAKe09t2a+Sif+YMuB1JhuHgVLtimNLiJ0KBtfLJzV3ahzsP2e7ba02L9rgTXH7FENbNT8Pdsz0khsDK+QkjXyMrekElOPaGus8btnKdbzXgiJTrzL9IjHmjR1OvduaeLA4ufyjBx9tLmSPfeoHD5jWQh5v91OxCCKXYY/k9hxGQAAAHjaY2BigAAuMMnIgA5YwaJMjEyMzPzJ+Tk5qcklmfl58WmZOTlcCD4Ak9QKlAAAAAAAAAH//wACAAEAAAAMAAAAFgAAAAIAAQADAAQAAQAEAAAAAgAAAAB42mNgYGBkAIKrS9Q5QPRNayUZGA0AM8UETgAA)
    format("woff");
  font-weight: normal;
  font-style: normal;
}

.rate-main .icon {
  font-family: "rateFont" !important;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: block;
}

.rate-main .relative {
  position: relative;
}

.rate-main .icon-main {
  position: absolute;
  height: 100%;
  left: 0;
  top: 0;
  overflow: hidden;
}

.rate-main .icon-collection-fill:before {
  content: "\e6ea";
}

.rate-main .icon-collection:before {
  content: "\e6eb";
}

.rate-main {
  display: -webkit-inline-flex;
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
}
</style>